<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 标签管理 -->
        <!-- 头部 面包屑 -->
        <div v-if="$route.query.id" slot="header" class="clearfix">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{ $route.query.name }}</el-breadcrumb-item>
            <el-breadcrumb-item>标签管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <!-- 头部 表单 -->
        <el-form ref="form" :inline="true" :model="form" label-width="80px">
          <el-row type="flex" justify="end">
            <!-- 表单 -->
            <el-col :span="14">
              <el-form-item label="标签名称">
                <el-input
                  v-model="form.tagName"
                  style="width: 200px"
                />
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="form.state" placeholder="请选择">
                  <el-option label="启动" :value="1"></el-option>
                  <el-option label="禁用" :value="0"></el-option>
                </el-select>
                <el-button size="small" @click="emptyBtn">清除</el-button>
                <el-button type="primary" size="small" @click="simple"
                  >搜索</el-button
                >
              </el-form-item>
            </el-col>
            <!-- 按钮 -->
            <el-col :span="10" style="text-align: right">
              <el-button
                type="text"
                icon="el-icon-back"
                @click="$router.back()"
                v-if="$route.query.id"
              >返回学科</el-button>
              <el-button
                type="success"
                icon="el-icon-edit"
                size="small"
                @click="addBtn"
              >新增目录</el-button>
            </el-col>
          </el-row>
        </el-form>

        <!-- 警告 -->
        <el-alert
          :title="updateCounts"
          type="info"
          show-icon
          :closable="false"
        >
        </el-alert>

        <!-- 表格内容 -->
        <el-table :data="tableData" style="width: 100%; margin-top: 15px">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="subjectName" label="所属学科"></el-table-column>
          <el-table-column prop="tagName" label="标签名称"></el-table-column>
          <el-table-column prop="username" label="创建者"></el-table-column>
          <el-table-column label="创建日期">
            <template slot-scope="scope">
              {{ scope.row.addDate | tansDate }}
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              已{{ scope.row.state | forState }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150px">
            <template slot-scope="scope">
              <el-button type="text" @click="startUsing(scope.row)">
                {{scope.row.state === 1 ? "禁用" : "启用"}}
              </el-button>
              <el-button
                type="text"
                :disabled="scope.row.state === 1"
                @click="editBtn(scope.row)"
                >修改</el-button>
              <el-button
                type="text"
                :disabled="scope.row.state === 1"
                @click="delBtn(scope.row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          background
          style="text-align: right; margin-top: 20px"
          layout=" prev, pager, next, sizes, jumper"
          :total="counts"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="query.pagesize"
          :current-page="query.page"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :hide-on-single-page="showPagination"
        >
        </el-pagination>

        <!-- 弹出层 -->
        <el-dialog :title="isEdit?'修改目录':'编辑目录'" :visible.sync="showDialog" width="20%">
          <!-- 表单组件 -->
          <tags-add
            v-if="showDialog"
            :subject="subjectId"
            :isEdit="isEdit"
            @closeDialog="showDialog = false"
            @closeAndRefresh="closeAndRefresh"
          />
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list as getCompanys } from '@/api/hmmm/companys'
import { list as getQuestion } from '@/api/hmmm/questions'

// 引入 api
import { list, remove } from '../../api/hmmm/tags'

// 枚举
import { status } from '@/api/hmmm/constants.js'

// 引入 dayjs
import dayjs from 'dayjs'

// 引入 新增或编辑 的表单组件
import TagsAdd from '../components/tags-add.vue'

export default {
  name: 'Tags',
  components: { TagsAdd },
  data () {
    return {
      // 表单数据
      form: {
        directoryName: null, // 目录名称
        state: null // 状态 1 开启 0 屏蔽
      },

      // 表格数据
      tableData: [],

      // 数据总条数
      counts: 0,
      // 分页数据
      query: {
        page: 1, // 当前页数
        pagesize: 10 // 默认显示条数
        // subjectID: '', // 学科ID
      },

      // 是否展示弹出层
      showDialog: false,

      // 给子组件传id
      subjectId: {},

      // 是否是编辑
      isEdit: false,

      // 是否展示分页
      showPagination: true
    }
  },
  created () {
    getCompanys()
    getQuestion()

    // 获取项目列表
    this.simple()
  },

  computed: {
    updateCounts () {
      return `数据一共${this.counts}条`
    }
  },

  filters: {
    // 转换状态数据
    forState (val) {
      const obj = status.find((item) => item.value === val)
      return obj.label
    },

    // 转换日期格式
    tansDate (val) {
      return dayjs(val).format('YYYY-MM-DD hh:mm:ss')
    }
  },

  methods: {

    // 点击清除
    emptyBtn () {
      this.form = {}
      // 清空表单
      this.$refs.form.resetFields()
      // 自动刷新页面
      this.simple()
    },

    // 是否展示分页
    isShowPagination () {
      if (this.query.page === 1) {
        this.showPagination = false
      }
    },

    // 点击删除
    delBtn (id) {
      this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 发送删除请求
          await remove({ id })
          // 如果删除的是当前页面的最后一条数据，page减减
          if (this.tableData.length === 1) {
            this.query.page--
            // 如果总页数只有 1 页，并且删除的是最后一页，需要将页码重置为1
            if (this.query.page === 1) {
              this.query.page = 1
            }
          }
          // 刷新页面
          this.simple()
          // 成功提示
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    // 关闭弹出层，并刷新页面
    closeAndRefresh () {
      this.showDialog = false
      // 获取项目列表
      this.simple()
    },

    // 点击修改
    editBtn (row) {
      this.isEdit = true
      // 将当前行的数据传给子组件
      this.subjectId = row
      this.showDialog = true
    },

    // 点击新增
    addBtn () {
      this.isEdit = false
      this.showDialog = true
    },

    // 点击启动
    startUsing (row) {
      // 判断 state 是否全等于 0 ，状态 1 开启 0 禁用
      row.state = row.state === 0 ? 1 : 0
      // 给表格里的数据进行重新赋值，渲染页面
      this.tableData.state = row.state
      // 操作成功的提示
      this.$message.success('操作成功')
    },

    // 更改显示条数触发
    handleSizeChange (num) {
      this.query.pagesize = num
      // 将页码重置为 1
      this.query.page = 1
      // 刷新页面
      this.simple()
    },

    // 更改当前页触发
    handleCurrentChange (num) {
      this.query.page = num
      // 刷新页面
      this.simple()
    },

    // 点击搜索： 获取项目列表
    async simple () {
      // 发送请求
      const res = await list({ ...this.query, subjectID: this.$route.query.id, ...this.form })
      // 给表格赋值
      this.tableData = res.data.items
      // 给总条数赋值
      this.counts = res.data.counts
    }
  }
}
</script>

<style scoped>
button.el-button.el-button--default.el-button--small {
  margin-left: 10px;
}
</style>
